<template>
  <div id="login">
    <!-- <img src="../../assets/login/bg.png" alt=""> -->
    <div class="login-box">
      <!-- <p class="topicon">&lt;</p> -->
      <div class="login-containner">
        <p class="lgtitle">
          <span class="lgts" @click="isps=false" :class="{active:!isps}">快捷登录</span> |
          <span class="lgts"  @click="isps=true" :class="{active:isps}">密码登录</span>
        </p>
        <div class="paform" v-if="isps">
          <form action>
            <input type="text" name="phone" class="lgphone" placeholder="请输入手机号">
            <input type="password" name="password" class="lgpassword"  placeholder="请输入密码">
            <input type="button" class="lgbtn" value="登录">
          </form>
        </div>
        <div class="paform" v-else>
          <form action>
            <input type="text" name="phone" class="lgphone" placeholder="请输入手机号">
            <input type="text" name="yzm" class="lgpassword yzm"  placeholder="请输入验证码">
            <span class="hqyzm">获取验证码</span>
            <input type="button" class="lgbtn" value="登录">
          </form>
        </div>
        <div class="lgfoot">
          <router-link to class="torea">忘记密码</router-link>
        </div>
        <div id="tore">
          <span class="torespan">还没有账号？</span>
          <router-link to class="torea">立即注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isps: false,
      acclass:{
          active:this.isps,
      }
    };
  },
  mounted() {
    console.log(this);
  }
};
</script>
<style scoped>
#login {
  width: 1920px;
  height: 900px;
  background-image: url("../../assets/login/bg.png");
}
.login-box {
  width: 500px;
  height: 600px;
  background-color: #fff;
  position: fixed;
  top: 190px;
  left: 710px;
}
.topicon {
  line-height: 90px;
  margin-left: 37px;
  font-size: 24px;
  font-weight: 900;
}
.lgtitle {
  width: 300px;
  font-weight: 900px;
  text-align: center;
  position: absolute;
  color: #d2d2d2;
  top: 120px;
  font-size: 22px;
  line-height: 22px;
  left: 100px;
}
.lgtitle .active {
  color: #000;
}
.lgtitle span {
  font-weight: 100;
  padding: 0 30px;
}
.paform input {
  position: absolute;
  display: block;
  width: 300px;
  border: 0;
  line-height: 48px;
  height: 48px;
  border-bottom: 1px solid #ccc;
  outline: none;
  font-size: 16px;
  left: 100px;
}
.paform .lgphone {
  top: 165px;
}
.paform .lgpassword {
  top: 213px;
}
.paform .lgpassword.yzm {
  width:200px;
}
.hqyzm{
  position:absolute;
  top:230px;
  height:30px;
  width:100px;
  text-align: center;
  left:300px;
  background-color: #d2d2d2;
  color: #fff;
  line-height: 30px;
}
.paform .lgbtn {
  width: 300px;
  height: 50px;
  position: absolute;
  top: 334px;
  left: 100px;
  color: #fff;
  font-size: 22px;
}
.lgfoot {
  position: absolute;
  top: 393px;
  left: 100px;
  width: 300px;
  text-align: center;
  color: #444;
  font-size: 16px;
  text-align: left;
}

#tore {
  position: absolute;
  display: block;
  width: 500px;
  bottom: 0px;
  color: #999;
  text-align: center;
  line-height: 50px;
  background-color: #f1f1f1;
}
.torea {
  color: #333;
}
</style>
